{% extends 'website/src/base.html' %}
{% block style %}
    <style>
         .error-msg {
            color: red;
            position: absolute;
            font-size: 16px;
        }
        a { text-decoration: none; }

         .modal {
             text-align: center;
          }

         @media screen and (min-width: 500px) {
             .modal:before {
                 content: '';
                 display: inline-block;
                 height: 100%;
                 margin-right: -4px;
                 vertical-align: middle;
             }

             .modal-dialog {
                 display: inline-block;
                 text-align: left;
                 vertical-align: middle;
                 {#width: inherit; /* 继承父元素宽度 */#}
                 {#height: inherit; /* 继承父元素宽度 */#}
             }
          }
    </style>
{% endblock %}
{% block main %}
	<section class="m-auto">
        <div class="card shadow-lg d-flex">
            <div class="card-body">
                <h3 class="card-title fw-bold text-center">忘记密码</h3>
                <form method="POST" class="needs-validation" novalidate="" autocomplete="off" id="regForm">
                    {% csrf_token %}    {#这个是防止csrf攻击的#}
                       {% for field in form %}
                           {% if field.name == 'code' %}
                             <div class="row">
                                 <div class="col-md-6">
                                     {{ field }}
                                     <span class="error-msg"></span>  <!--由js去提示错误-->
                                  </div>
                                 <div class="col-md-6">
                                 <input id="btnSub" type="button" class="btn btn-light border-success-subtle" value="点击获取验证码">
                                 </div>
                            </div>

                           {% else %}
                         <div class="form-group">
                            {% if field.name == 'email' %}
                            <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                            {% endif %}
                            {{ field }}
                            <span class="error-msg"></span>  <!--由js去提示错误-->
                         </div>
                          {% endif %}
                        {% endfor %}
                </form>
            </div>
            <div class="card-footer py-3 mt-0 border-0">
                <button type="button" class="btn btn-success w-100 mb-3" id="btnSet" style="border-radius: 15px;">输入验证码后点我验证</button>
                <div class="text-center">
                    记住您的密码? <a href="{% url 'login' %}" class="text-dark">登录</a>
                </div>
            </div>
		</div>
	</section>

    <!-- 模态框:重置密码 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="position: relative; left: 110px; top: 50px">
        <div class="modal-content">
            <div class="modal-body">
                <form id="editForm_fun" role="form" action="/forgot/resetPWD/">
                    {% csrf_token %}
                        <h5 class="text-center" style="margin-bottom: 5px">重置密码</h5>
                        {% for field in form_set %}
                             <div class="form-group mb-4">
                                <label for="{{ field.id_for_label }}" style="margin-bottom: 0">{{ field.label }}:</label>
                                {{ field }}
                                <span class="error-msg"></span>  <!--由js去提示错误-->
                            </div>
                        {% endfor %}
                </form>
            </div>
            <div class="text-center mb-3 mt-0">  <!--modal-footer -->
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="saveAction()">确认</button>
                <button type="button" class="btn btn-outline-youtube btn-sm" data-dismiss="modal" onclick="cancelDelete('myModal')">取消</button>
            </div>
        </div>
    </div>
</div>


{% endblock %}
{% block js %}
    <script src="/static/js/login.js"></script>
    <script>
        // 页面框架加载完成之后自动执行的函数
        $(function (){
              // 让模态框的位置给原表单一致
              {#var formTop = $('#regForm').position().top;#}
              {#var formLeft = $('#regForm').position().left;#}
              {#$('#myModal').css('top', formTop);#}
              {#$('#myModal').css('left', formLeft);#}
            bindClickSubmit();  <!-- 获取验证码 -->
            bindClickBtnSet();  <!-- 用验证码进行验证 -->

        })
        // 调试用，完成后去掉
         function bindClickSubmita(){
            $('#btnSub').click(function (){$('#myModal').modal('show')})
         }

        // 获取验证码
        function bindClickSubmit(){
            let bS = $('#btnSub')
            bS.click(function (){
                // 每次点击前，都先把错误信息清空
                $('.error-msg').empty();
                bS.prop('disabled',true);  // 禁用
                bS.val('正在发送验证码')
                // 发送后台请求发送邮件
                $.ajax({
                    url: '{% url "forgot" %}',
                    type: 'POST',
                    data: $('#regForm').serialize(),  // 所有字段数据 + CSRF token
                    dataType: 'JSON',
                    success(res){
                         if(res.status){
                            // 发送成功后会接收到返回的res: {status: True}，进入倒计时：
                             sendSmsRemind()
                         }else{
                             $.each(res.error, function (key, value) {
                                 $('#id_' + key).next().text(value[0]);
                             })
                             $('#btnSub').val('点击获取验证码').prop('disabled',false);  // 启用
                         }
                    }
                })
            })
        }
        // 用验证码进行验证
        function bindClickBtnSet(){
            $('#btnSet').click(function (){
               // 每次点击前，都先把错误信息清空
               $('.error-msg').empty();
              // 发送后台请求验证
                $.ajax({
                    url: '{% url "forgot_reset" %}',
                    type: 'POST',
                    data: $('#regForm').serialize(),  // 所有字段数据 + CSRF token
                    dataType: 'JSON',
                    success(res){
                         if(res.status){
                            $('#myModal').modal('show');
                         }else{
                             $.each(res.error, function (key, value) {
                                 $('#id_' + key).next().text(value[0]);
                             })
                         }
                    }
                })

            })
        }

        //  倒计时120秒
        function sendSmsRemind(){
            var $btnSms = $('#btnSub')
            $btnSms.prop('disabled',true);  // 禁用
            var time = 120
            var remind = setInterval(function (){
                $btnSms.val(time+'秒重新发送')
                time -= 1
                if (time < 1){
                    clearInterval(remind)
                    $btnSms.val('点击获取验证码').prop('disabled', false)
                }
            },1000)
        }

        // 关闭模态框
        function cancelDelete(med) { $('#'+med).modal('hide'); }

        // 重置密码
        function saveAction(){
                $.ajax({
                    url: '{% url "forgot_resetPWD" %}',
                    type: 'POST',
                    data:{
                        formData1: $('#regForm').serialize(),  // 第一个表单的序列化数据
                        formData2: $('#editForm_fun').serialize()  // 第二个表单的序列化数据
                    },  // 所有字段数据 + CSRF token
                    dataType: 'JSON',
                    success(res){
                         if(res.status){
                            $('#myModal').modal('hide');
                            location.href = res.data
                         }else{
                             $.each(res.error, function (key, value) {
                                 $('#id_' + key).next().text(value[0]);
                             })
                         }
                    }
                })
         }

    </script>
{% endblock %}
